<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <!--  <h2>{{ message }}</h2>-->

    <!--搜索表单-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="员工编号">
                <el-input v-model="searchForm.id" placeholder="员工编号"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="searchForm.ename" placeholder="名称"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">新增</el-button>
            </el-form-item>
        </el-form>
    </el-row>
<!--数据表格-->
    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border
                @selection-change="selectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="ename"
                    label="姓名"
                    width="105">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="工号"
                    width="120">
            </el-table-column>
         <!--   <el-table-column
                    prop="ename"
                             label="姓名"
                             width="105">
            <img width="60px;" height="60px;" th:src="'/dept/show?fileName='+${dept.filepath}">


                </el-table-column>-->
           <!--<el-table-column label="性别" prop="sex" width="120">

                <el-table class="radio" :label="1">男</el-table>
                <el-table class="radio" :label="0">女</el-table>

             </el-table-column>-->
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="dizhi"
                    label="地址"
                    width="120">
            </el-table-column>

            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="联系方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="hiredate"
                    label="入职时间"
                    width="120"
                    :formatter="formatDate"
            >
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="角色"
                    width="120"
                    >
               <!-- :formatter="getrole"-->
            </el-table-column>
          <!--  <el-table-column
                    prop="manage"
                    label="工作地点"
                    width="120"
            >
            </el-table-column>-->
            <el-table-column
             prop="state"
             label="状态"
             width="120">
            </el-table-column>
                        <el-table-column
                                label="操作">

                            <template scope="scope">
                                <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
                                <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>


        <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <el-col :span="6" >
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col>
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

<!--新增编辑弹框框-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :rules="editFormRules" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="姓名" prop="ename">
                <el-input v-model="editForm.ename" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="rolename" >
                <el-select v-model="editForm.rolename" >
                    <el-option
                            v-for="item in options"
                            :key="item.rid"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工作地点" prop="manage" >
                <el-select v-model="editForm.manage" >
                    <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.manage"
                            :value="item.manage">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="editForm.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" >
                <el-input type="password" v-model="editForm.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="dizhi">
                <el-input v-model="editForm.dizhi" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="telephone">
                <el-input v-model="editForm.telephone" auto-complete="off" style="padding-right: 15px;"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-select v-model="editForm.state" placeholder="请选择状态">
                    <el-option label="正常" value="正常"></el-option>
                    <el-option label="封存" value="封存"></el-option>
                </el-select>
            </el-form-item>
           <!-- <el-form-item label="性别">
                 <el-radio-group v-model="editForm.sex">

                     <el-radio class="radio" :label="1">男</el-radio>
                     <el-radio class="radio" :label="0">女</el-radio>
                 </el-radio-group>
             </el-form-item>-->



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script >
    var  app =new Vue({
        el:"#app",
         data:{
             message: '员工管理',
             //部门下拉框
            options:[{
                options:""
            }],value:'',
             options2:[{
                 options2:""
             }],value:'',
             //列表数据
             tableData: [],
             //显示加载中样式
             loading:false,
             //搜索表单
             searchForm: {
                 id: '',
                 ename: ''//,
                 //deptNo: ''223
             },

             //多选值
             multipleSelection: [],
             //当前页
             currentPage:1,
             //分页大小
             pageSize:10,
             //总记录数
             total:800,
             //删除的弹出框
             deleteVisible:false,
             //编辑界面是否显示
             editFormVisible: false,
             editLoading: false,
             goUrl:'',
             //搜索框
             editFormRules: {
                 ename: [
                     { required: true, message: '请输入姓名', trigger: 'blur' }
                 ]
             },
             //编辑界面数据
             editForm: {
                 id:0,
                 ename: "",
             },
             //验证
             editFormRules:{
                 telephone: [
                     {required: true, message: '请输入联系电话', trigger: 'blur'},
                     {min: 11, message: '请输入不少于11个数字', trigger: 'blur'},
                     {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的联系电话'}
                 ]
             }
         },
        created:function(){
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            //alert("111");
            var self = this;
            var start =(this.currentPage-1)*this.pageSize;
            var end =this.currentPage*this.pageSize+1;
            //获取部门下拉框
            axios.post('/yuangong/getRole').then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                // self.total=response.data.total;
                self.options = response.data.options;
                // self.multipleSelection=response.data.data;
            })
            axios.post('/yuangong/getshi').then(function(response){
                // console.log(response.data);
                //alert(response.data.total);
                // self.total=response.data.total;
                self.options2 = response.data.options2;
                // self.multipleSelection=response.data.data;
            })
            //加载数据
            axios.post('/yuangong/list',{'start':start,'pageSize':this.pageSize}).then(function(response){
                // console.log(response.data);
               //alert(response.data.total);
                self.total=response.data.total;
                self.tableData = response.data.data;
                // self.multipleSelection=response.data.data;
            })

        },
        methods:{
           //日期格式更改
            formatDate (row, column) {
                var date = new Date(row.hiredate) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '年'
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月'
                var D = date.getDate() + '日'
                return Y + M + D
            },
        /*   getrole:function(){
                var _self = this;
                axios.post('/yuangong/getRole',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    //_self.total=response.data.total;
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },*/

            //表格重新加载数据
            loadingData:function() {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.searchForm.id,'ename':this.searchForm.ename,'deptNo':this.searchForm.deptNo};
                //   alert(JSON.stringify(searchForm));
                axios.post('/yuangong/list',searchForm).then(function(response){
                    console.log(response.data);
                    //alert(response.data);
                    _self.total=response.data.total;
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                console.log(_self.currentPage);
                setTimeout(function(){
                    console.info("加载数据成功");
                    _self.loading = false;
                },300);
            },
          //表格查询事件
            searchClick:function() {
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.currentPage*this.pageSize+1;
                //var searchForm =this.searchForm;

                var searchForm={'start':start,'pageSize':this.pageSize,'id':this.searchForm.id,'ename':this.searchForm.ename};
               // alert(searchForm);
                //formData.push({'start':start}).push({'end':end})
                axios.post('/yuangong/list',searchForm).then(function(response){
                    // console.log(response.data);
                    //alert(response.data.total);
                    self.total=response.data.total;
                    self.tableData = response.data.data;
                    // self.multipleSelection=response.data.data;
                })
                self.loadingData();//重新加载数据
            },
            //分页大小修改事件
           pageSizeChange:function(val) {
            console.log('每页 ' + val +' 条');
            this.pageSize = val;
            var _self = this;
            _self.loadingData();//重新加载数据
           },
        //当前页修改事件
        currentPageChange:function(val) {
            this.currentPage = val;
            console.log('当前页: ' + val);
            var _self = this;
            _self.loadingData();//重新加载数据
        },
            //表格删除事件
            deleteClick:function(row) {

                var _self = this;
                //alert(_self);
                this.$confirm('确认当前操作吗？', '提示', {

                    type: 'warning'
                }).then(function(){

                    var  url="/yuangong/del?id="+row.id;// "emp/del/1"
                  //  var  url="/yuangong/del/"+row.id;// "emp/del/1"
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){//接受参数
                            _self.$message({
                                message: row.id + '删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },
            //删除所选，批量删除
            removeSelection:function() {
                var _self = this;
                var multipleSelection = this.multipleSelection;
                if(multipleSelection.length < 1) {
                    _self.$message({
                        message: '请至少选中一条记录',
                        type: 'error'
                    });
                    return;
                }
                var ids = "";
                for(var i=0;i<multipleSelection.length;i++) {
                    var row = multipleSelection[i];
                    ids += row.id + ","
                }
                this.$confirm('确认删除' + ids +'吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/yuangong/batchDel?ids="+ids;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        var temp="";
                        if(response.data>0){
                            temp="删除成功";
                        }else {
                            temp="删除失败";
                        }
                        _self.$message({
                            message: ids + temp,
                            type: 'success'
                        });
                        _self.loadingData();//重新加载数据
                    });

                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },

        //表格编辑事件
        editClick:function(row) {
            this.goUrl="/yuangong/update";
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
        },

            //表格增加事件
         addClick:function() {
                //alert(111);
                this.goUrl="/yuangong/add";
                var _self = this;
                this.editForm={id:0,ename:"",rid:"",username:""}
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },
            //保存点击事件
         editSubmit:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
               // alert(JSON.stringify(formData));
                // axios.post("/emp/add",{"ename":this.editForm.ename,"job":this.editForm.job}).then(function(response){
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);
                    // alert(222);
                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible = false;// 让弹出层隐藏

                        _self.loadingData();//重新加载数据
                    }
                })
                console.info(this.editForm);
            }
        }
    })

</script>
</html>